<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加用户 - 睿途教育</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <!-- 原始配置已合并到公共配置文件 tailwind.config.js 中 -->
    <!-- 请勿删除此注释，保留原始配置记录 -->
    <!--
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                        gray: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    -->
    <!-- 原始工具类已合并到公共配置文件 src/input.css 中 -->
    <!-- 请勿删除此注释，保留原始工具类记录 -->
    <!--
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-card {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
        }
    </style>
    -->
</head>

<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-0 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途教育</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-list mr-2"></i> 版本管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-exchange mr-2"></i> 版本对比
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-cogs mr-2"></i> 系统配置
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索用户..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="#" class="hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="#" class="hover:text-primary">系统设置</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="#" class="hover:text-primary">用户管理</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-primary font-medium">添加用户</span>
            </div>
            
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">添加用户</h2>
                <p class="text-gray-500 mt-1">创建新用户账户，设置用户信息和权限</p>
            </div>

            <!-- 主内容区 -->
            <div class="bg-white rounded-lg shadow-sm">
                <!-- 表单头部 -->
                <div class="p-6 border-b border-gray-200">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-800">用户信息</h3>
                        <div class="flex items-center space-x-3">
                            <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors">
                                <i class="fa fa-eye mr-2"></i>预览
                            </button>
                            <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                <i class="fa fa-save mr-2"></i>保存
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 表单内容 -->
                <div class="p-6">
                    <form class="space-y-6">
                        <!-- 基本信息 -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    用户名 <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all"
                                       placeholder="请输入用户名">
                                <p class="text-xs text-gray-500 mt-1">用户名将用于登录，不可重复</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    真实姓名 <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all"
                                       placeholder="请输入真实姓名">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    邮箱地址 <span class="text-danger">*</span>
                                </label>
                                <input type="email" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all"
                                       placeholder="请输入邮箱地址">
                                <p class="text-xs text-gray-500 mt-1">邮箱将用于接收通知和重置密码</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    手机号码
                                </label>
                                <input type="tel" 
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all"
                                       placeholder="请输入手机号码">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    密码 <span class="text-danger">*</span>
                                </label>
                                <div class="relative">
                                    <input type="password" 
                                           class="w-full px-4 py-3 pr-10 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all"
                                           placeholder="请输入密码">
                                    <button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">密码长度至少8位，包含字母和数字</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    确认密码 <span class="text-danger">*</span>
                                </label>
                                <div class="relative">
                                    <input type="password" 
                                           class="w-full px-4 py-3 pr-10 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all"
                                           placeholder="请再次输入密码">
                                    <button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 角色和权限 -->
                        <div class="border-t border-gray-200 pt-6">
                            <h4 class="text-md font-medium text-gray-800 mb-4">角色和权限</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        用户角色 <span class="text-danger">*</span>
                                    </label>
                                    <select  multiple class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all bg-white">
                                        <option value="">请选择用户角色</option>
                                        <option value="student">学生</option>
                                        <option value="teacher">教师</option>
                                        <option value="admin">管理员</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        用户状态
                                    </label>
                                    <div class="flex items-center space-x-4">
                                        <label class="flex items-center">
                                            <input type="radio" name="status" value="active" class="text-primary focus:ring-primary" checked>
                                            <span class="ml-2 text-sm text-gray-700">激活</span>
                                        </label>
                                        <label class="flex items-center">
                                            <input type="radio" name="status" value="inactive" class="text-primary focus:ring-primary">
                                            <span class="ml-2 text-sm text-gray-700">禁用</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 详细信息 -->
                        <div class="border-t border-gray-200 pt-6">
                            <h4 class="text-md font-medium text-gray-800 mb-4">详细信息</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        性别
                                    </label>
                                    <div class="flex items-center space-x-4">
                                        <label class="flex items-center">
                                            <input type="radio" name="gender" value="male" class="text-primary focus:ring-primary">
                                            <span class="ml-2 text-sm text-gray-700">男</span>
                                        </label>
                                        <label class="flex items-center">
                                            <input type="radio" name="gender" value="female" class="text-primary focus:ring-primary">
                                            <span class="ml-2 text-sm text-gray-700">女</span>
                                        </label>
                                        <label class="flex items-center">
                                            <input type="radio" name="gender" value="other" class="text-primary focus:ring-primary">
                                            <span class="ml-2 text-sm text-gray-700">其他</span>
                                        </label>
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        出生日期
                                    </label>
                                    <input type="date" 
                                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all">
                                </div>

                                <div class="md:col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        个人简介
                                    </label>
                                    <textarea rows="3" 
                                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all resize-vertical"
                                              placeholder="请输入个人简介（可选）"></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- 权限设置 -->
                        <div class="border-t border-gray-200 pt-6">
                            <h4 class="text-md font-medium text-gray-800 mb-4">权限设置</h4>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="flex items-center">
                                    <input type="checkbox" class="text-primary focus:ring-primary rounded">
                                    <span class="ml-2 text-sm text-gray-700">查看题库</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="text-primary focus:ring-primary rounded">
                                    <span class="ml-2 text-sm text-gray-700">编辑题目</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="text-primary focus:ring-primary rounded">
                                    <span class="ml-2 text-sm text-gray-700">管理用户</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="text-primary focus:ring-primary rounded">
                                    <span class="ml-2 text-sm text-gray-700">查看报告</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="text-primary focus:ring-primary rounded">
                                    <span class="ml-2 text-sm text-gray-700">系统设置</span>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" class="text-primary focus:ring-primary rounded">
                                    <span class="ml-2 text-sm text-gray-700">数据导出</span>
                                </div>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="border-t border-gray-200 pt-6">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <button type="button" class="px-6 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors">
                                        <i class="fa fa-times mr-2"></i>取消
                                    </button>
                                    <button type="button" class="px-6 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors">
                                        <i class="fa fa-save mr-2"></i>保存草稿
                                    </button>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                        <i class="fa fa-check mr-2"></i>创建用户
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-file-text-o mr-1"></i> 使用条款
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-shield mr-1"></i> 隐私政策
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>

</html> 